<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: Geoportail layer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Geoportail layer for ol" />
	<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
	<script src="/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- filesaver-js -->
	<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

	<link rel="stylesheet" href="../style.css" />
  <style>
    button {
      margin: .5em;
    }
    .result {
      max-width: 100%;
      width: 30em;
      box-sizing: border-box;
      overflow: hidden;
      display: block;
      margin: 0;
    }
    pre {
      margin: 0;
      background-color: #fff;
      width: 100%;
      overflow: auto;
    }
    .result ul {
      background-color: #fff;
      border: 1px solid #369;
      display: table;
      cursor: pointer;
      padding: 0;
      margin: 0;
    }
    .result li {
      padding: 0 1em;
    }
    .result li:hover {
      background-color: rgb(51, 102, 153, .3);
    }
  </style>
</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

	<a href="../../index.html">
		<h1>ol-ext: BW layer</h1>
	</a>
	<div class="info">
    Filter to turn white pixels transparent
  </div>

	<!-- DIV pour la carte -->
	<div id="map" style="width: 100%; height: 600px;"></div>

<script>
// The map
var map = new ol.Map ({
  target: 'map',
  view: new ol.View ({
    zoom: 10,
    center: [819375, 5465467]
  })
});
map.addControl(new ol.control.LayerSwitcher({ extent: true }));
map.addControl(new ol.control.Permalink({ visible: false }));

// WMTS layer
var gp = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
map.addLayer(gp);

// Use raster source
var raster = new ol.source.Raster({
  sources: [ gp.getSource() ],
  operation: function(pixels, data) {
    var pixel = pixels[0];
    var lightness = parseInt(3*pixel[0] + 4*pixel[1] + pixel[2] >>> 3);
    return [lightness, lightness, lightness, pixel[3]];
  }
})
map.addLayer(new ol.layer.Image({ 
  title: gp.get('title')+' - Raster op',
  visible: false,
  minResolution: gp.getMinResolution(),
  maxResolution: gp.getMaxResolution(),
  extent: gp.getExtent(),
  source: raster
}));
gp.setVisible(false);

// Modify tiles on the flow using a tileload function
var gpbw = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
gpbw.set('title', gpbw.get('title') + ' - Grayscale')
gpbw.getSource().setTileLoadFunction(ol.ext.imageLoader.grayscale());
map.addLayer(gpbw);

// new layer JPG + turns white pixels transparent
ol.layer.Geoportail.register("ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX", {"layer":"ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX","theme":"ortho","desc":"Orthophotographie réalisée suite au passage de la tempête Alex dans les Alpes Maritimes","server":"https://data.geopf.fr/wmts","bbox":[7.07917,43.8095,7.64199,44.1903],"format":"image/jpeg","minZoom":6,"maxZoom":20,"originators":{"Geoservices":{"attribution":"Géoservices","href":"https://geoservices.ign.fr/"}},"queryable":false,"style":"normal","tilematrix":"PM","title":"Orthophotographie d’urgence Alex"});
var layer = new ol.layer.Geoportail({ 
  title: 'JPEG layer + transparent',
  layer: 'ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX' 
});
layer.getSource().setTileLoadFunction(ol.ext.imageLoader.transparent([[250,250,250],[255,255,255]]));
map.addLayer(layer);

</script>
</body>
</html>